<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
	<style type="text/css">
		/**{
			margin: 0;
			padding: 0;
		}*/
		#table2 td{
			width: 150px;
			height: 150px;
			text-align: center;
		}
		#choujiang{
			color: red;
			font-size: 25px;
		}
		table{
			float: left;
		}
		/*#table2{
			margin-left: 50px;
		}*/
		/*#table3{
			margin-left: 50px;
		}*/
		.swiper-container {
			width: 301px;
			height: 301px;
			/*position: fixed;
			left: 50%;*/
		}
		.swiper-container img {
			width: 100%;
			height: 100%;
		}
	</style>
	
</head>
<body>
	
	<table border="1px solid" cellspacing="0" id="table2">
		<tr>
			<td class="jiang1">便宜20元</td>
			<td class="jiang2">脸黑不便宜</td>
			<td class="jiang3">便宜30元</td>
			<td class="jiang4">便宜20元</td>
			
		</tr>
		<tr>
			<td class="jiang12">便宜60元</td>
		
			<td id="choujiang" colspan="2" rowspan="2">
				<div class="swiper-container">
	            <!--轮播-->
	            <div class="swiper-wrapper">
	                <div class="swiper-slide">
	                    
	                    <img src="img/111.jpg"/>
	                </div>
	                <div class="swiper-slide">
	                    <img src="img/2.jpg"/>
	                </div>
	                <div class="swiper-slide">
	                    <img src="img/3.jpg"/>
	                </div>
	            </div>
	        </div>
			</td>
			
			<td class="jiang5">便宜50元</td>
			
		</tr>
		<tr>
			<td class="jiang11">便宜40元</td>
			<td class="jiang6">便宜30元</td>
			
			
		</tr>
		<tr>
			<td class="jiang10">便宜20元</td>
			<td class="jiang9">便宜30元</td>
			<td class="jiang8">脸黑不便宜</td>
			<td class="jiang7">便宜20元</td>
			
		</tr>
		
	</table>
	<table id="table3" border="1px solid" cellspacing="0">
	<tbody id="tbody3">
		<tr>

			<td>中奖</td>
		</tr>
	</tbody>
	</table>
	    
	        <script src="js/swiper.js"></script>
	        <script>
	            mySwiper=new Swiper(".swiper-container",{//图片轮播的调用
	                autoplay:2000,//自动轮播
	                loop:true,//图片循环
	//              direction:'vertical',//图片垂直轮播
	              direction:'horizontal', //默认  水平滑动
	        //      speed:3000,//滑动速度
	             effect:'fade',//淡入淡出效果
	              fade:{
	                  crossFade:true,
	              }
	//              initialSlide:2,  //默认设置第几张图片
	//              pagination:'.swiper-pagination',//小白点轮播的调用
	//              paginationClickable:true,
	//              prevButton:'.swiper-button-prev',//向左翻动
	//              nextButton:'.swiper-button-next',//向右翻动
	//              autoplayDisableOnInteraction:false,//加上这句话 可以让轮播动起来  手动调一下还可以动
	            });
	         
	        </script>
</body>
<script type="text/javascript" src="js/chou.js"></script>
</html>